<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="10">
      <el-col :span="21"
        ><div class="grid-content bg-purple">
          <el-form :inline="true" :model="dataForm" label-width="100px">
            <el-form-item label="请选择测点">
              <el-select
                v-model="dataForm.measurePoint"
                placeholder="请选择测点"
              >
                <el-option
                  v-for="item in measurePointOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="查询范围">
              <el-date-picker
                v-model="dataForm.startTime"
                type="datetime"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="dataForm.endTime"
                type="datetime"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="search()">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清空</el-button>
            </el-form-item>
            <!-- <el-row :gutter="10">
        <el-button type="success">页面自动刷新间隔</el-button>
        &nbsp;页面自动刷新间隔&nbsp;
      <el-select v-model="timeInterval" placeholder="页面自动刷新间隔">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      </el-row> -->
          </el-form>
        </div></el-col
      >
      <el-col :span="3"
        ><div class="grid-content bg-purple-light">
          <el-button
            type="primary"
            id="selectedButton"
            @click="selectAll($event)"
            :isSelect="isSelect"
            >{{ isSelect == 1 ? "全不选" : "全选" }}</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <!-- <el-col :span="12">
        <el-card>
          <div id="3LineBox" class="chart-box"></div>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      chartLine: null,
      legend: null,
      displacement: [],
      dataForm: {
        startTime: null,
        endTime: null,
        measurePoint: null
      },
      measurePointOptions: [],
      timeInterval: 600,
      isSelect: 1,
      options: [
        {
          label: "30秒",
          value: 30
        },
        {
          label: "1分钟",
          value: 60
        },
        {
          label: "10分钟",
          value: 600
        },
        {
          label: "30分钟",
          value: 1800
        }
      ]
    };
  },

  mounted() {
    this.start();
    this.getMeasurePoint();
    this.getDisplacementData();
  },

  created() {
    this.getMeasurePoint();
    if (this.$route.query != null && this.$route.query.stationId != null) {
      this.initStationNum(this.$route.query.stationId);
      this.search();
    }
  },

  methods: {
    initStationNum(stationId) {
      this.dataForm.measurePoint = Number(stationId);
    },
    start() {
      this.timer = setInterval(() => {
        this.getDisplacementData();
      }, 1000 * this.timeInterval);
    },
    filterTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    },
    search() {
      this.displacement = [];
      this.legend = [];

      this.$http({
        url: this.$http.adornUrl("/generator/displacement/getDisplacement"),
        method: "post",
        params: this.$http.adornParams({
          startTime: this.dataForm.startTime,
          endTime: this.dataForm.endTime,
          measurePoint: this.dataForm.measurePoint
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.displacement = data.data.displacement;
          this.legend = data.data.legend;
          console.log(this.displacement);
        }
        this.dataListLoading = false;
        this.initChart();
      });
    },
    clear() {
      this.chartLine = null;
      this.dataForm.startTime = null;
      this.dataForm.endTime = null;
      this.isSelect = 1;
      this.getDisplacementData();
    },
    // 获取测点信息
    getMeasurePoint() {
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/getMeasurePoint"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.measurePointOptions = data.data;
        }
        this.dataListLoading = false;
      });
    },
    getDisplacementData() {
      this.$http({
        url: this.$http.adornUrl("/generator/displacement/getDisplacement"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.displacement = data.data.displacement;
          this.legend = data.data.legend;
        }
        this.dataListLoading = false;
        this.initChart();
      });
    },
    initChart() {
      var option = null;
      option = {
        title: {
          text: "偏移曲线"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 80,
          top: 90,
          bottom: 50,
          data: this.legend
          // selector: ["all", "inverse"]
        },
        grid: {
          left: "5%",
          right: "30%",
          bottom: "3%",
          containLabel: true
        },
        tooltip: {
          // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "none", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          },
          showContent: true,
          formatter: function(arg) {
            let deep = arg[0].data[1];
            let disp = arg[0].data[0];
            var deepStr = parseFloat(deep).toFixed(1);
            var dispStr = parseFloat(disp).toFixed(4);
            return (
              "当前深度为:" + deepStr + "米<br>当前位移为:" + dispStr + "毫米"
            );
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0]
          },
          {
            type: "inside",
            yAxisIndex: [0]
          }
        ],
        xAxis: {
          type: "value",
          name: "位移量(mm)",
          min: -100,
          max: 100,
          boundaryGap: false,
          nameLocation: "center",
          nameGap: 23 // 表现为上下位置
        },
        yAxis: {
          type: "value",
          name: "深度(m)",
          position: "middle",
          nameGap: 40, // 表现为上下位置
          nameLocation: "center"
        },
        series: [
          {
            type: "line"
            // data: this.displacement
          }
        ]
      };
      var serie = [];
      for (var i = 0; i < this.displacement.length; i++) {
        var item = {
          name: this.legend[i],
          data: this.displacement[i],
          type: "line",
          smooth: true
        };
        serie.push(item);
      }
      option.series = serie;
      this.chartLine = echarts.init(document.getElementById("J_chartLineBox"));
      this.chartLine.clear();
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    selectAll(e) {
      //获取图例集合
      var option = this.chartLine.getOption();
      var selectArr = this.chartLine.getOption().legend[0].data;
      var val = null;
      if (this.isSelect == 1) {
        val = false;
        //e.target.setAttribute("isSelect", 0);
        this.isSelect = 0;
      } else {
        val = true;
        this.isSelect = 1;
        //$(this).val("全不选");
      }
      var obj = {};
      for (var key in selectArr) {
        obj[selectArr[key]] = val;
      }
      //设定图例是否选中的结果 赋值给 option.legend[0].selected
      option.legend[0].selected = obj;
      this.chartLine.setOption(option);
    }
  }
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }

  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 600px;
  }
}
</style>
